import React, { Component } from "react";
import CommentInput from "./components/CommentInput.jsx";
import CommentHead from "./components/CommentHead.jsx";
import CommentList from "./components/CommentList.jsx";
import ReactDOM from "react-dom";
import "./components/index.css";
// import dayjs  from "dayjs";
class App extends Component {
  state = {
    // 用户信息
    user: {
      name: '清风徐来',
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
      vip: true
    },
    // 评论列表
    comments: [
    //   { 
    //     id: 100, 
    //     name: '__RichMan', 
    //     avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
    //     content: '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
    //     time: new Date('2021/10/12 10:10:23'),
    //     vip: true,
    //     collect: false
    //   },
    //   { 
    //     id: 101, 
    //     name: '糖蜜甜筒颖', 
    //     avatar: 'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
    //     content: '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
    //     time: new Date('2021/07/01 00:30:51'),
    //     vip: false,
    //     collect: true
    //   },
    //     { 
    //     id: 102, 
    //     name: '清风徐来', 
    //     avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
    //     content: '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
    //     time: new Date('2021/09/23 15:12:44'),
    //     vip: true,
    //     collect: false
    //   }
    ],
    active: "default",
  }
   // 1. 组件初始化的时候从本地获取，更新状态
   componentDidMount() {
    // 约定：数据名字 comments
    const comments = JSON.parse(localStorage.getItem('comments') || '[]')
    this.setState({ comments })
  }

  // 2. 监听组件更新，重新存储下数据
  componentDidUpdate() {
    localStorage.setItem('comments', JSON.stringify(this.state.comments))
  }
    // 添加评论
    addComment = (content) => {
      // 1. 准备评论对象
      let id = 0
      if (this.state.comments.length) {
        id = Math.max(...this.state.comments.map((item) => item.id)) + 1;
      }
      console.log(id)
      const newComment = {
        id,
        ...this.state.user,
        content,
        time: new Date(),
        collect: false,
      };
      // 2. 追加到comments
      this.setState({
        comments: [...this.state.comments, newComment],
      });
    }
      
  setActive= (arg)=>{
    console.log(arg);
    let newComment = []
    if(arg === 'default'){
      newComment = this.state.comments.sort( (p,c)=> 
            p.id - c.id
      )
      
    }else{
      newComment = this.state.comments.sort( (p,c) =>
         p.time.getTime() - c.time.getTime()
      )
    }
    console.log(newComment);
    this.setState({
      comments:newComment,
      active:arg
    })
  }
  render() {
    return (
      <div className="comments">
        {/* 输入框组件 */}
        <CommentInput addComment={this.addComment} />
        {/* 标题排序组件 */}
        <CommentHead 
         comments={this.state.comments}
         active={this.state.active}
         setActive={this.setActive}/>
        {/* 列表组件 */}
        <CommentList 
            delComment={this.delComment}
            collectComment={this.collectComment}
            comments={this.state.comments}
            user={this.state.user}
            active={this.state.active} />
      </div>
    );
  }

}
ReactDOM.render(<App />, document.getElementById("root"));

